<template>
  <div class="page">
    <h2>示例03 - 设置行的 class</h2>
    <vue-tabulation
      ref="grid"
      :dataSource="dataSource"
      :columns="columns"
      :height="500"
      :rowClassName="rowClassName"
    ></vue-tabulation>
  </div>
</template>

<script>
export default {
  name: 'rowClass',
  data() {
    return {
      dataSource: this.$mock.dataSource(10),
      columns: this.$mock.columns(),
    }
  },
  methods: {
    rowClassName(row, index) {
      if ([1, 3, 7].includes(index)) {
        return 'row-green'
      }
      if ([2, 6].includes(index)) {
        return 'row-yellow'
      }
    },
  },
}
</script>

<style lang="scss">
.vue-tabulation tr.row-green th,
.vue-tabulation tr.row-green td {
  background: #8bc34a;
  &:hover {
    background: #4caf50;
  }
}
.vue-tabulation tr.row-yellow th,
.vue-tabulation tr.row-yellow td {
  background: #ffc107;
  &:hover {
    background: #ff9800;
  }
}
</style>
